export default function updateNodeElement(
  newElement,
  virtualDOM,
  oldVirtualDOM
) {
  // 获取属性
  const newProps = virtualDOM.props;

  const oldProps = oldVirtualDOM?.props || {};

  // 遍历新属性
  Object.keys(newProps).forEach((propName) => {
    // 获取属性
    const newPropsValue = newProps[propName];
    const oldPropsValue = oldProps[propName];
    if (newPropsValue !== oldPropsValue) {
      // 更新属性
      // 事件属性
      if (propName.slice(0, 2) === "on") {
        // 事件名称
        const eventName = propName.toLowerCase().slice(2);
        // 为元素添加事件
        newElement.addEventListener(eventName, newPropsValue);
        if(oldPropsValue) {
          // 删除旧事件
          newElement.removeEventListener(eventName, oldPropsValue);
        }
      } else if (propName === "value" || propName === "checked") {
        newElement[propName] = newPropsValue;
      } else if (propName !== "children") {
        if (propName === "className") {
          newElement.setAttribute("class", newPropsValue);
        } else {
          newElement.setAttribute(propName, newPropsValue);
        }
      }
    }
  });

  // 遍历旧属性，考虑旧属性被删除的情况
  Object.keys(oldProps).forEach((propName) => {
    const newPropsValue = newProps[propName]
    const oldPropsValue = oldProps[propName]
    if (!newPropsValue) {
      // 事件属性
      if (propName.slice(0, 2) === "on") {
        const eventName = propName.toLowerCase().slice(2);
        newElement.removeEventListener(eventName, oldPropsValue);
      } else if(propName !== "children") {
        newElement.removeAttribute(propName);
      }
    }
  })
}
